<template>
	<view id="form-box" class="form-box">
		<view>
			<view class="input-box">
				<!-- <text>订购手机号</text> -->
				<input focus="true" class="input" type="text" maxlength="11" @input="inputPhone"
					v-model="formData.mobile" placeholder="输入购买手机号">
				<!-- <image class="mobile-icon" mode="heightFix" src="/static/images/mobile-icon.png">
				</image> -->
			</view>
			<view v-if="isNeedSendCode" class="input-box">
				<input class="input" type="text" maxlength="6" v-model="formData.code" placeholder="请输入验证码">
				<view @click="sendCodeHandler" class="send-code">{{sendCodeText}}</view>
			</view>
		</view>
		<view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="props.btnImg">
			</image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#ef3d2b" />
			</checkbox-group>
			<view>
				<text class="text" @click="agreementChange">
					我已阅读并同意
				</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《关于客户个人信息收集、使用规则公告》</text>
			</view>
		</view>
	</view>
	<clb-agreement v-if="isShowAgreement" :agreementType="agreementType" @ok="agreementOkHandler"></clb-agreement>
	<ad-component :mobile="formData.mobile" v-if="isShowAd"></ad-component>
	<order-success @close="closeOrderSuccess" :mobile="formData.mobile" v-if="isShowOrderSuccess"></order-success>
</template>

<script setup>
	import {
		onMounted,
		ref,
		inject,
		computed,
		toRaw
	} from "vue";
	import httpUtil from "../../utils/httpUtil.js";
	import validParamsUtil from "@/utils/validParamsUtil.js";
	import messageUtil from "@/utils/messageUtil.js"
	import countDownUtil from "@/utils/countDownUtil.js"
	import phoneApi from "@/apis/phoneApi.js"
	import deviceUtil from "@/utils/deviceUtil.js";
	import orderApi from "@/apis/orderApi.js";

	const formData = ref({
		mobile: '',
		code: '',
	});

	const isShowAgreement = ref(false)
	const agreementType = ref(1) // 1-订购须知,2-隐私政策

	const sendCodeDownNumber = ref(0);
	const sendCodeText = ref('获取验证码')

	const isShowOrderSuccess = ref(false)
	const props = defineProps(['btnImg', 'param', 'sutingcheMobile', 'mobile', 'submit', 'isNeedSendCode'])
	const emits = defineEmits(['selectType', 'inputMobile'])

	const adData = inject('ad')

	const isShowAd = computed(() => {
		if (!adData || !adData.value) {
			return false;
		}
		if (adData.value.adst) {
			return true;
		}
		return false;
	})

	const isNeedSendCode = computed(() => {
		if (props.isNeedSendCode === false) {
			return false;
		}
		return true;
	})


	onMounted(() => {
		console.log('props', props)
		if (props.mobile) {
			formData.value.mobile = props.mobile
			inputPhone()
			if (props.isNeedSendCode !== false) {
				sendCodeHandler()
			}

		}
		initShowTimeMethod()
	})


	const autoSubmit = () => {
		if (props.submit && parseInt(props.submit) == 1) {
			submitMethod()
		}
	}

	const getPhoneYunYingMethod = () => {
		phoneApi.getOperator(formData.value.mobile, (data) => {
			formData.value.province = data.Province;
			formData.value.city = data.City;
			formData.value.yys = data.Isp;

		});
	}

	const closeOrderSuccess = () => {
		console.log('closeOrderSuccess')
		if (adData.value.adst) {
			isShowOrderSuccess.value = false;
		} else {
			messageUtil.showMsg('订购成功')
		}
	}

	const agreementChange = (e) => {
		formData.value.isAgreement = !formData.value.isAgreement;
	}

	const showAgreementHandler = (value) => {
		isShowAgreement.value = true;
		agreementType.value = value;
	}

	const agreementOkHandler = () => {
		isShowAgreement.value = false;

	}
	//发送验证码
	const sendCodeHandler = (callBack) => {
		console.log(callBack)
		if (!validParamsUtil.validPhone(formData.value.mobile)) {
			messageUtil.showFail('手机号不正确');
			return;
		}
		if (!countDownUtil.valid(sendCodeDownNumber.value)) {
			return;
		}
		if (orderApi.isDownProduct()) {
			messageUtil.showFail('该产品已下架')
			return;
		}
		messageUtil.showLoading()
		orderApi.send(formData.value.mobile, res => {
			messageUtil.closeLoading()
			messageUtil.showSuccess('短信发送成功')
			if (res.data && res.data.msgExtendParam) {
				orderApi.setMsgExtendParam(res.data.msgExtendParam)
			}
			if (res.data && res.data.msgOrderNo) {
				orderApi.setInfoOrderNum(res.data.msgOrderNo)
			}

			if (res.data && res.data.infoOrderNum) {
				orderApi.setInfoOrderNum(res.data.infoOrderNum)
			}

			sendCodeDownNumber.value = 60;
			countDownUtil.start(sendCodeDownNumber.value, res => {
				sendCodeDownNumber.value = res;
				if (res <= 0) {
					sendCodeText.value = '获取验证码';
				} else {
					sendCodeText.value = res;
				}
			})
			if (callBack) {
				callBack()
			}
		}, err => {})
	}

	//按钮点击事件
	const submitMethod = () => {

		console.log(orderApi.getPid())
		if (!validParamsUtil.validPhone(formData.value.mobile)) {
			messageUtil.showFail('手机号格式不正确')
			return;
		}
		if (isNeedSendCode.value) {
			if (formData.value.code.length < 1) {
				messageUtil.showFail('请输入验证码')
				return;
			}
		}

		if (!formData.value.isAgreement) {
			messageUtil.showFail('请同意并勾选协议')
			return;
		}
		if (orderApi.isDownProduct()) {
			messageUtil.showFail('该产品已下架')
			return;
		}
		if (orderApi.getPid() == 67) {
			sendCodeHandler(res => {
				clbLogin()
			})
		} else if (orderApi.getPid() == 68) { 
		
			//当pid为68时先调验证码，再掉登录获取订单，再下单跳转
			orderApi.send((formData.value.mobile), res => { //发送验证码
				console.log(res, 68)
				if (res.code == 1) {
					httpUtil.post('/api/Clb/smsLogin', { //获取订单
						pid:orderApi.getPid(),
						mobile:formData.value.mobile,
						smsCode:'000000',
						infoOrderNum:res.data.msgOrderNo,
					}, res1 => {
						console.log(res1)	
						httpUtil.post('/api/Clb/placeOrder', { //下单跳转
							pid:orderApi.getPid(),
							mobile:formData.value.mobile,
							smsCode:'000000',
							infoOrderNum:res.data.msgOrderNo,
							msgExtendParam:JSON.stringify(toRaw(res1.data.msgExtendParam)),
							a:httpUtil.getA()
						}, res2 => {
							console.log(res2)
								location.href=res2.data.payUrl
						}, err2 => {
							console.log(err2)	
						})
					}, err1 => {
						console.log(err1)	
					})
				}
			})
			console.log(111)
		} else if(orderApi.getPid() == 73){
			console.log(111)
		
		} else {
			if (isNeedSendCode.value) {
				clbLogin()
			} else {
				clbSubmit()
			}

		}

	}

	const clbLogin = () => {
		messageUtil.showLoading()
		orderApi.login(formData.value.mobile, formData.value.code ? formData.value.code : '000000', res => {
			messageUtil.closeLoading()

			if (res.data && res.data.msgExtendParam) {
				orderApi.setMsgExtendParam(res.data.msgExtendParam)
			}
			if (res.data && res.data.msgOrderNo) {
				orderApi.setInfoOrderNum(res.data.msgOrderNo)
			}
			if (res.data && res.data.infoOrderNum) {
				orderApi.setInfoOrderNum(res.data.infoOrderNum)
			}
			clbSubmit()
		}, err => {})
	}

	const clbSubmit = () => {
		messageUtil.showLoading()
		orderApi.submitOrder(formData.value.mobile, formData.value.code ? formData.value.code : '000000', res => {
			messageUtil.closeLoading()
			if (res.data && res.data.payUrl) {
				window.location.href = res.data.payUrl
			} else {
				messageUtil.showSuccess('下单成功')
				setTimeout(() => {
					orderApi.orderSuccessGotoUrl()
				}, 2000)
			}

		}, err => {
			messageUtil.showSuccess('下单失败')
			setTimeout(() => {
				orderApi.orderFailGotoUrl()
			}, 2000)
		})
	}


	const inputPhone = () => {
		if (formData.value.mobile.length == 11) {
			formData.value.isAgreement = true;
			// getPhoneYunYingMethod()
			autoSubmit();
			emits('inputMobile', formData.value.mobile)
		}
	}

	const timeData = ref({
		lastTime: 0,
		hour: 23,
		minute: 59,
		second: 59,
	});

	const initShowTimeMethod = () => {
		let lastTime = new Date();
		lastTime.setHours(23);
		lastTime.setMinutes(59);
		lastTime.setSeconds(59);
		timeData.value.lastTime = lastTime.getTime();
		setInterval(() => {
			showTimeMethod();
		}, 1000);
	}

	const showTimeMethod = () => {
		var time_now = new Date(); // 获取当前时间
		time_now = time_now.getTime();
		var time_distance = timeData.value.lastTime - time_now; // 结束时间减去当前时间
		var int_day, int_hour, int_minute, int_second;
		if (time_distance >= 0) {
			// 天时分秒换算
			int_day = Math.floor(time_distance / 86400000)
			time_distance -= int_day * 86400000;
			int_hour = Math.floor(time_distance / 3600000)
			time_distance -= int_hour * 3600000;
			int_minute = Math.floor(time_distance / 60000)
			time_distance -= int_minute * 60000;
			int_second = Math.floor(time_distance / 1000)

			// 时分秒为单数时、前面加零站位
			if (int_hour < 10)
				int_hour = "0" + int_hour;
			if (int_minute < 10)
				int_minute = "0" + int_minute;
			if (int_second < 10)
				int_second = "0" + int_second;

			// 显示时间
			// time_d.innerHTML = int_day;
			timeData.value.hour = int_hour;
			timeData.value.minute = int_minute;
			timeData.value.second = int_second;
		}
	}

	const showPayTypeImg = computed(() => {
		if (deviceUtil.isWeChatBrowser()) {
			return '/static/images/wx-pay.png'
		}
		return '/static/images/zfb-pay.png'
	})
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;


		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}

	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;

		span {
			font-size: 1rem;
		}
	}

	.input-box {
		width: 100%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
		position: relative;


		text {
			font-size: 32rpx;
			letter-spacing: 1rpx;
			color: #323232;
			text-align: left;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			font-family: SourceHanSansCN-Medium;
		}

		.input {
			flex-grow: 1;
			height: 70rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #313131;
			background-color: #ffffff;
			border-radius: 30rpx;
			padding-left: 20rpx;

			.input-placeholder {
				font-size: 36rpx;
				color: #313131 !important;
			}

		}

		.mobile-icon {
			// height: 76rpx;
			width: auto;
			height: 46rpx;
			position: absolute;
			top: 15rpx;
			right: 25rpx;
		}




		.type-list-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.item {
				padding: 9rpx;
				border-radius: 17rpx 12rpx;
				font-size: 26rpx;
				letter-spacing: 1rpx;
				background-color: #efefef;
				border: solid 1rpx #c2c2c2;
				color: #8e8e8e;
				margin-right: 27rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.current {
				background-color: #f0f8fd;
				border: solid 1rpx #94c0ff;
				color: #69a2eb;
			}
		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #fb5f2b;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	.clauze {
		width: 100%;
		margin: 15rpx auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		align-items: center;

		.text {
			letter-spacing: 2rpx;
			font-size: 22rpx;
			color: #333333;
		}

		.tip-color {
			color: #d44848;
			font-size: 22rpx;
		}
	}

	::v-deep(.van-checkbox__text) {
		color: #d44848;
		font-size: .8rem;
	}

	.submit {
		width: 100%;
		margin: 0 auto;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			animation: butChange 1s infinite;
			width: 100%;
		}
	}

	.pay-type-icon {
		display: block;
		width: auto;
		width: 100%;
		margin-top: 30rpx;
	}
</style>